<template>
  <div class="top-bar">
    <button class="bar-button" @click="visible = !visible">
      <img src="../../assets/apple.svg" />

      <Menu :visible.sync="visible" :menus="menus" @select="choose"></Menu>
    </button>
  </div>
</template>

<script>
import Menu from "./menu.vue"
import { mapActions, mapGetters } from "vuex"
import { AppIdEnum } from "@/constant"
// import storage from '../../utils/storage'
export default {
  components: {
    Menu
  },
  computed: {
    ...mapGetters(["isLogin"]),
    menus() {
      const menu = [
        {
          title: "我的信息",
          execute: () => {
            this.openApp(AppIdEnum.ABOUT)
          }
        },
        {
          title: "修改个人信息",
          execute: () => {
            this.openApp(AppIdEnum.UPDATEUSER)
          }
        },
        {
          type: "divider"
        },
        {
          title: "锁屏",
          execute: () => {
            this.changeShowDesktop(false)
          }
        }
      ]

      // const token = storage.getItem('token')
      if (this.isLogin) {
        menu.push({
          title: "退出登录",
          execute: () => {
            this.logout().then(() => {
              this.getCollects()
            })
          }
        })
      } else {
        menu.push({
          title: "登录",
          execute: () => {
            this.openApp(AppIdEnum.LOGIN)
          }
        })
      }
      return menu
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    ...mapActions(["openApp", "logout", "getCollects", "changeShowDesktop"]),
    choose(item) {
      if (item.execute) {
        item.execute()
      }
      // console.log(item)
    }
  }
}
</script>

<style lang="less" scoped>
.top-bar {
  --app-color-light-hsl: 240, 24%, 100%;
  position: fixed;
  top: 0;
  height: 20px;
  width: 100%;
  background-color: hsla(var(--app-color-light-hsl), 0.3);
  backdrop-filter: blur(12px);

  .bar-wrapper {
  }
  .bar-button {
    --app-color-light-contrast: hsl(0, 0%, 11%);
    background-color: transparent;
    border: none;
    color: var(--app-color-light-contrast);
    padding: 0 10px;
    margin-left: 5px;
  }
}
</style>
